<template>
    <!-- 视频详情 -->
    <!-- 外层盒子 -->
    <div class="container">
        <!-- 标题 -->
        <div class="title">
            {{ videoContent.articleTitle }}
        </div>

        <!-- 作者 -->
        <div class="video-info-detail">
            <span href="#" class="author">
                <i class="el-icon-video-play"></i>
                {{ videoContent.readingQuantity }}
            </span>
            <span href="#" class="author">
                <i class="el-icon-s-comment"></i>
                {{ videoContent.commentCount }}
            </span>
            <span>
                {{ timestampToTime(videoContent.createTime) }}
            </span>
            <span>
                <i class="el-icon-close" style="color: red"></i>
                未经作者授权，禁止转载
            </span>
        </div>

        <!-- 视频组件 -->
        <div class="video">
            <video-player
                :src="videoContent.videoPath"
                class="video-css"
                ref="videoPlayer"
            ></video-player>
        </div>

        <!-- 控制 -->
        <div class="controls">
            <span>
                <a href="">
                    <!--点赞-->
                    <img-icon name="red_fork" size="2rem"/>
                    {{ videoContent.likeCount }}
                </a>
            </span>
            <span>
                <a href="">
                    <!--转发-->
                    <img-icon name="forward" size="2rem"/>
                </a>
                6666
            </span>
            <span>
                <a href="">
                   <img-icon name="collection" size="2rem"/>
                    666
                </a>
            </span>
        </div>
        <hr/>

        <!-- 段落 -->
        <div class="paragraph">
            {{ videoContent.description }}
        </div>
    </div>
</template>
<script>
import {mixin} from "@/mixins";
import videoPlayer from "./VideoPlayer";
import {timestampToTime} from "@/utils/utils";
import {articleById} from "../api/index";
import ImgIcon from "@/components/ImgIcon.vue";

export default {
    name: "video-content",
    components: {
        ImgIcon,
        videoPlayer,
    },
    mixins: [mixin],
    props: {
        articleId: String,
    },
    data() {
        return {
            videoContent: {},
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.getVideoContent();
        });

        // 点赞
        const like = document.getElementById("like");
        // 添加鼠标移入事件监听器
        like.addEventListener("mouseenter", function () {
            // 在事件处理函数中修改 SVG 元素的颜色
            like.querySelector("circle").setAttribute("fill", "#00aeec");
        });

        // 添加鼠标移出事件监听器
        like.addEventListener("mouseleave", function () {
            // 在事件处理函数中还原 SVG 元素的颜色
            like.querySelector("circle").setAttribute("fill", "#61666d");
        });
        like.addEventListener("click", function (event) {
            // 点击时的处理逻辑
            console.log("Touch ended!");
        });

        // 收藏
        const collect = document.getElementById("collect");
        // 添加鼠标移入事件监听器
        collect.addEventListener("mouseenter", function () {
            // 在事件处理函数中修改 SVG 元素的颜色
            collect.querySelector("circle").setAttribute("fill", "#00aeec");
        });

        // 添加鼠标移出事件监听器
        collect.addEventListener("mouseleave", function () {
            // 在事件处理函数中还原 SVG 元素的颜色
            collect.querySelector("circle").setAttribute("fill", "#61666d");
        });
        collect.addEventListener("click", function (event) {
            // 点击时的处理逻辑
            console.log("Touch ended!");
        });

        // 转发
        var transpond = document.getElementById("transpond");
        // 添加鼠标移入事件监听器
        transpond.addEventListener("mouseenter", function () {
            // 在事件处理函数中修改 SVG 元素的颜色
            transpond.querySelector("circle").setAttribute("fill", "#00aeec");
        });

        // 添加鼠标移出事件监听器
        transpond.addEventListener("mouseleave", function () {
            // 在事件处理函数中还原 SVG 元素的颜色
            transpond.querySelector("circle").setAttribute("fill", "#61666d");
        });
        transpond.addEventListener("click", function (event) {
            // 点击时的处理逻辑
            console.log("Touch ended!");
        });
    },
    created() {
    },
    methods: {
        timestampToTime(time) {
            return timestampToTime(time);
        },
        // 根据文章id获取文章信息
        getVideoContent() {
            articleById(this.articleId)
                .then((res) => {
                    console.log(res);
                    this.videoContent = res.data;
                    this.$refs.videoPlayer.createVideoPlayer(
                        this.videoContent.videoPath,
                    );
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/video-content.scss";
</style>
